import React, {PropTypes} from 'react';
import {Table, Icon, Pagination, Popconfirm} from 'antd';

function List({loading, total, current, list, onPageChange, onEditItem, onDeleteItem}) {
    const columns = [{
        title: '姓名',
        dataIndex: 'username',
        key: 'username',
        render: text => <a href="#">{text}</a>,
    }, {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
    }, {
        title: '职员状态',
        key: 'is_staff',
        dataIndex: 'is_staff',
        render: text => text ? <Icon type="check" style={{color: '#FFF', background: 'rgb(112, 191, 43)'}}/> :
            <Icon type="close" style={{color: '#FFF', background: 'rgb(221, 70, 70)'}}/>
    }, {
        title: '创建时间',
        dataIndex: 'date_joined',
        key: 'date_joined',
        render: function (text) {
            if (text.indexOf('T') != -1) {
                let dateTime = text.split("T");
                return `${dateTime[0]} ${dateTime[1]}`;
            }
            return text;
        }
    }, {
        title: '动作',
        key: 'action',
        render: (text, record) => (
            <span>
            <a onClick={() => onEditItem(record)}>编辑</a>
            <span className="ant-divider"/>
            <Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.id)}>
          <a>删除</a>
        </Popconfirm>
        </span>
        ),
    }];

    function onChange(page) {
        onPageChange(page);
    }

    return (
        <div>
            <Table columns={columns} dataSource={list} pagination={false} loading={loading}/>
            <Pagination
                className="ant-table-pagination"
                total={total}
                current={current}
                pageSize={pageSize}
                onChange={onChange}
                showTotal={() => `总共${total}记录`}
            />
        </div>


    )
}

List.propTypes = {
    total: PropTypes.number,
    current: PropTypes.number,
    list: PropTypes.array,
    onPageChange: PropTypes.func,
    loading: PropTypes.any,
    onEditItem: PropTypes.func,
    onDeleteItem: PropTypes.func,
};

export default List;